title: 犀利开发—jQuery内核详解与实践-4_文档对象的操作及高效实践
date: 2018.1.8

toc_fold: unfold

第 1 章 jQ起步

第 2 章 jQ解密技术

第 3 章 高效选择的技巧与原理

第 4 章 文档对象的操作及高效实践

4.1 DOM标准

1 分解DOM

2 HTML DOM

3 DOM Core

Netscape document.layers[“id”]
微软 document.all[“id”]
0级DOM
1998.10 DOM Level1

4 DOM文档树

4.2 创建节点

元素、属性、文档、注释

1 创建元素

  1. jQ实现
  2. JS实现
  3. 实现方法比较：JS执行效率差距明显

    2 创建文本

  4. var txt=document.createTextNode(“dom稳定度)
  5. 差距进一步拉大

    3 创建属性

  6. JS

综上：虽然jQ方法简易，去拖延了代码的执行效率。建议多用JS直接操作DOM

4.3 插入元素

  1. jQuery实现

    1. 节点内部插入内容：append,appendTo,prepend,prependTo
    2. 节点外部插入内容：after,before,insertAfter,insertBefore
    3. 插入内容的破坏性
      1.3.2中，appendTo,prependTo,insertAfter,insertBefore

  2. JS实现

  3. 自定义JS扩展DOM功能函数
    var DOMextend=function(name,fn){
    if(!document.all){//非IE
    eval("HTMLElement.prototype."+name+"=fn");
}else{
    var _createElement=document.createElement
    document.createElement=function(tag){
        var _elem=_createElement(tag)
        eval("_elem."+name+"=fn")
        return _elem
    }
    var _getElementById=document.getElementById
    document.getElementById=function(id){
        ..
        return _elem
    }
    var _getElementByTagName=
}
    }
  4. 使用JS自定义appendTo,prependTo方法
    DOMextend(“appendTo”,function(e){
    var _this=_this
e.appendChild(this)
return _this
    })
  5. 使用JS自定义after,before方法
  6. 使用JS自定义insertAfter,insertBefore方法
    DOMextend(“insertBefore”,function(e){
    var _this=this
e.parentNode.insertBefore(_this,e)
return _this
    })

4.4 删除元素

  1. jQ实现
    remove,empty
  2. JS实现
  3. 使用JS自定义的empty方法

4.5 复制元素

  1. jQ实现
    clone,不复制事件（onclick复制），需要传参true
  2. JS实现
    预定义了cloneNode() 参数：true，是否包括原节点的属性和子节点

4.6 替换元素

  1. jQ实现
    replaceWith,replaceAll
  2. JS实现
    预定义了replaceChild(将，被)
  3. 使用JS自定义的replaceWith和replaceAll方法

4.7 包裹元素

  1. jQ实现
  2. JS实现
  3. 使用JS自定义wrap,wrapAll,wrapInner的方法

4.8 操作属性

1 设置属性

  1. jQ实现
  2. JS实现
  3. 执行效率比较：js块，动态设置的多考虑dom
    用法角度，jq灵活，可以批量设置attr({src:,alt:})

    2 获取属性

    3 删除属性

4.9 操作类样式

1 追加样式

  1. JS
    setAttribute(“class”,a+” cls”)

    2 移除样式

  2. JS
    正则匹配，替换为空

    3 切换样式

    4 判断样式

4.10 操作HTML、文本和值

1 读写HTML字符串

2 读写文本内容

3 读写表单值

2018.1.11 四 0：21 P182


2018.1.11 四 22.31

4.11 操作样式表

1 通用CSS样式读写方法

行内-style，内部，外部：stylesheets

2 绝对偏移位置

3 相对偏移位置

4 扩展DOM操作函数

5 元素的宽和高

4.12 元素遍历操作

  1. jQ实现
  2. JS实现

第 5 章 事件封装机制与解析

第 6 章 动画效果设计及其高效实践

第 7 章 Ajax异步通信高效实践

第 8 章 高效开发和使用插件

第 9 章 jQ辅助工具

第 10 章 使用jQ打造Ajax异步交互式动态网站